<template>
  <div class="app-container">
    <el-card style="width: 70%;margin: 0 auto" shadow="hover">
      <el-page-header @back="goBack">
        <div slot="title">
          <span style="line-height: 69px">返回</span>
        </div>
        <div slot="content" style="width: calc(63vw - 180px)">
          <el-row>
            <el-col :span="12">
              <h3 v-if="!data.title" style="color: #e74c3c">已删除</h3>
              <h3 v-if="data.title">{{ data.problemId }}：{{ data.title }}</h3>
            </el-col>
            <el-col :span="12" style="line-height: 69px">
              <el-button style="border: 1px solid #fff;color: #000;">
                <i class="el-icon-time time-memory"> {{ data.timeLimit }} Sec</i>
                <i class="el-icon-cpu time-memory" style="margin-left: 30px;"> {{ data.memoryLimit }} MB</i>
              </el-button>
            </el-col>
          </el-row>
        </div>
      </el-page-header>
      <el-divider />
      <el-row>
        <p>
          <span style="color: #95a5a6">提交用户：</span>
          <span v-if="!data.nick" style="color: #e74c3c">已注销</span>
          <span v-if="data.nick">{{ data.nick }}</span>
        </p>
        <p>
          <span style="color: #95a5a6">耗时：</span>{{ data.time }} ms
          <span style="margin-left: 4rem;color: #95a5a6">内存：</span>{{ data.memory }} kb
          <span style="margin-left: 4rem;color: #95a5a6">代码长度：</span>{{ data.codeLength }} bytes
          <span style="margin-left: 4rem;color: #95a5a6">提交时间：</span>{{ data.inDate }}
        </p>
        <p>
          <span style="color: #95a5a6">提交结果：</span>
          <span :style="{color: resultMap[data.result].color,fontSize: 18+'px',fontWeight: 'bold'}">
            {{ resultMap[data.result].result }}
          </span>
        </p>
      </el-row>
      <el-divider />
      <MonacoEditor
        v-model="data.source"
        :language="showLanguage(data.language).value"
        :options="{readOnly: true}"
        theme="vs-dark"
        style="height: 250px;overflow:hidden;margin-bottom: 20px;"
      />
    </el-card>
  </div>
</template>

<script>
import { languageOptions, resultMap } from '@/utils/global'
import MonacoEditor from 'vue-monaco'
import { solutionSourceById } from '@/api/solution'

export default {
  components: { MonacoEditor },
  data() {
    return {
      data: {
        problemId: 1000,
        title: 'A+B',
        timeLimit: 1,
        memoryLimit: 128,
        nick: '未命名',
        time: 14,
        memory: 1234,
        codeLength: 345,
        inDate: '2021-04-10',
        result: 4,
        source: '#include <stdio.h>\n' +
          'int main(){\n' +
          '    int a,b;\n' +
          '    while(scanf("%d %d",&a, &b) != EOF)\n' +
          '        printf("%d\\n",a+b);\n' +
          '    return 0;\n' +
          '}',
        language: 0
      },
      resultMap: resultMap,
      options: languageOptions
    }
  },
  created() {
    if (this.$route.query.solutionId === undefined) {
      this.$message.warning('不要乱输入')
      this.$router.back()
    } else {
      this.solutionSourceById()
    }
  },
  methods: {
    solutionSourceById() {
      solutionSourceById(this.$route.query).then(res => {
        this.data = res.data
      })
    },
    goBack() {
      this.$router.back()
    },
    showLanguage(item) {
      return this.options.find(t => t.num === Number(item))
    }
  }

}
</script>

<style scoped>
.el-divider--horizontal{
  margin: 12px 0
}
</style>
